<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="css/general.css" />
	
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    
    <script type='text/javascript'>
	  google.load('visualization', '1', {packages:['table']});
	  google.setOnLoadCallback(drawTable);
	
	  var table;
	  var data;
	  
	  function drawTable() {
	    data = new google.visualization.DataTable();
		data.addColumn('string', 'Event');
		data.addColumn('date', 'Date');
		data.addColumn('string', 'By');
		data.addColumn('string', 'Id');
		
		i = 0;
	    {% for event in events %}
	      data.addRows(1);
	      data.setCell(i, 0, '{{event.title|escape}}');
	      data.setCell(i, 1, new Date('{{event.eventdate|date:"Y,m,d"}}'));
	      data.setCell(i, 2, '{{event.author.nickname}}');
	      data.setCell(i, 3, '{{event.key.urlsafe}}');
		  i++;
	    {% endfor %}
		
	    var dateformatter = new google.visualization.DateFormat({pattern: "dd'/'MM'/'yyyy"});
	    dateformatter.format(data,1);
	
		var dataView = new google.visualization.DataView(data);
		dataView.setColumns([0, 1, 2]);
	    table = new google.visualization.Table(document.getElementById('table_div'));
	    table.draw(dataView, {allowHtml: true, showRowNumber: false});
	    google.visualization.events.addListener(table, 'select', selectHandler);
	  }
	
	  function selectHandler() {
	    var selection = table.getSelection();
	    document.getElementById('eventtodelete').value = data.getFormattedValue(selection[0].row, 3);
	  }    
    </script>
	
  </head>
  <body>
    <div class="loginmanagement">
      {{greeting|safe}}
    </div>   
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">Your Company</a>
          <div class="navbar-content">
            <ul class="nav ">
              <li class="active">
                <a href="#">Home</a> 
              </li>
              <li>
                <a href="#">About</a> 
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="hero-unit hidden-phone">
        <h1>Welcome to Your App!</h1>
        <p>We do amazing things that will make you want to give us money. Lots of
          money.</p>
        <p>
          <a class="btn btn-large btn-inverse" href="#"><span class="btn-label">Sign Up Today!</span></a> 
        </p>
      </div>
      <a class="btn btn-large btn-primary btn-block visible-phone" href="#"><span class="btn-label">Sign Up Today!</span></a>
      	<div class="well">
      		<form action="/delete" method="POST">
				<input type="hidden" value="" name="eventtodelete" id="eventtodelete">
				<div id='table_div'></div>
			
				<div class="form-actions">
					<input type="submit" class="btn" value="Delete"/>
				</div>
			</form>  
      
        <form action="/" method="POST">
          <label>Event</label>
          <input type="text" class="input-medium" name="title">
          <label>Description</label>
          <input type="text" class="input-medium" name="description">
          <label>Date</label>
          <input type="text" class="input-medium" name="eventdate">
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>    
  </body>
